11. Una Web con estilo CSS.


11.1. Introducción. Conceptos básicos. Referencias.

CSS (Cascading Style Sheets), comúnmente denominadas hojas de estilo, nos permiten separar la presentación de las páginas Web del contenido de éstas. Mientras que con HTML/XHTML nos centramos en que mostrar con CSS definimos cómo mostrarlo.

Diferenciar entre la presentación y el contenido de un documento mejora el mantenimiento posterior ya que definimos una estructura más cohesionada y con menor acoplamiento entre sus componentes.

La filosofía que sigue CSS es definir para las distintas etiquetas HTML/XHTML el estilo, presentación, que deseemos. Así cada vez que utilicemos una etiqueta se aplicará automáticamente el estilo. Veamos un ejemplo:

Observa estos dos ejemplos en los cuales presentamos la misma página HTML/XHTML.

Página Web sin CSS:

Página Web con CSS:

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<body>

<h1>Ejemplo básico de hojas de estilo</h1>

<hr />

<p> Documento que no dispone de hojas de estilo.

Si deseamos cambiar la presentación de este texto.

Tendremos que realizarlo en la propia etiqueta.

</body>

</html>

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

p { color:red; font-family:Arial; }

h1 { color:blue; font-size:large; }

</style>

<body>

<h1>Ejemplo básico de hojas de estilo</h1>

<hr />

<p> Documento que dispone de hojas de estilo. Indicado por la etiqueta style type=”text/css”.

</body>

</html>

Mientras que en el ejemplo de la izquierda si queremos definir los atributos de presentación de por ejemplo la etiqueta <p> ,tenemos que hacerlo dentro de la propia etiqueta, con las hojas de estilo, ejemplo de la derecha, una vez definidos el estilo para la etiqueta <p> cada vez que utilicemos esta etiqueta se aplicará el estilo que hemos indicado.


Fíjate en la siguiente instrucción:

p { color:red;}

CSS define los siguientes conceptos:

Cada regla está compuesta de los siguientes elementos:

A la hora de incluir los estilos en las páginas Web podemos diferenciar tres métodos:

<link rel=”stylesheel” type=”text/css” href=”mifichero.css”>

Otra característica destacable de CSS es la particularidad de poder especificar diferentes reglas para los medios o dispositivos con los que estamos trabajando: impresoras, pantallas, móviles, etc. CSS define los siguientes medios:


Definición

Medio

all

Todos los dispositivos

braille

Dispositivos táctiles que emplean el sistema braille

embosed

Impresoras braille

handheld

Dispositivos de mano como los PDA y los móviles

print

Para documentos paginados en modo “Vista de impresión”

projection

Proyectores

screen

Monitores

speech

Dispositivos de voz, sintetizadores

tty

Dispositivos de visualización con capacidades limitadas

tv

Televisores

Para definir un estilo para un medio específico utiliza la siguiente sintaxis:

@media medio{

Reglas

}

@media screen{

p { color:red;}

}

A lo largo del resto de epígrafes del capítulo te vamos a explicar los ejemplos más comunes sobre el uso de CSS. Si quieres profundizar en su estudio te recomendamos las siguientes direcciones:


Dirección

http://www.w3.org/Style/CSS/

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

http://www.w3schools.com/css/

11.2. Aplicando CSS mediante los selectores.

Existen cinco selectores básicos que nos van a proporcionar el dominio de las hojas de estilo, estos son:

*{declaración;}

Se aplica a todos los elementos de la página. No se suele utilizar mucho ya que es difícil que un mismo estilo lo definamos para toda la página.

Etiqueta_HTML {declaración;}

Se aplica a todos las etiquetas HTML/XHTML de la página.

Etiqueta_HTML(a) Etiqueta_HTML(b) {declaración;}

Aplicamos el estilo a las etiquetas HTML/XHTML(b) que se encuentren dentro de las etiquetas HTML/XHTML(a). Quizás este concepto lo veamos mejor con un ejemplo:

Analicemos el ejemplo:

Observa que para indicar comentarios en CSS nos basta con el par “/*” y “*/”.

Debajo de los comentarios nos encontramos con el selector anidado p span { color:red; font-family:Arial; }, Éste se aplicará sólo a las partes de la página Web que cumplan las dos condiciones, es decir, a las que estén dentro de un párrafo y a la vez diferenciadas por la etiqueta <span>.

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Comentarios en CSS*/

p span { color:red; font-family:Arial; }

</style>

<body>

<span>Ejemplo de hojas de estilo</span>

<hr />

<p><span>Ejemplo de aplicación de selector anidado.</span></p>

<p> En este texto no se aplicará el estilo</p>

</body>

</html>

Ten cuidado al utilizar selectores anidados, ya que también podemos agrupar estilos mediante la coma. No es lo mismo esto:

p span { color:red; font-family:Arial; }, donde definimos un selector anidado, que esta declaración:

p, span { color:red; font-family:Arial; },que es la agrupación de estilos.

.identificador de clase {declaración;}

Son muy utilizados. La ventaja de estos selectores es la posibilidad de que disponemos en HTML/XHTML de definir todas las clases que deseemos y poderlas diferenciar unívocamente. Así, entre otras cosas, podemos definir distintos estilos para la misma etiqueta. Observa este ejemplo:

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Comentarios en CSS*/

.normal { color:blue; font-family:Arial; }

.info { color:red; background=blue; }

.pregunta {color:black; background=red; }

</style>

<body>

<h1>Ejemplo de hojas de estilo</h1>

<hr />

<p><span class="normal">Ejemplo de aplicación de selector de clases.</span></p>

<p> En este texto no se aplicará el estilo</p>

<p><span class="info">Texto al que se le aplica la clase info.</span></p>

<p><div class="pregunta">Texto al que se le aplica la clase pregunta.</div></p>

</body>

</html>

Hemos definido 3 clases distintas de estilos: “.normal”, “.info” y ”. pregunta”; fíjate que el primer carácter es el punto. Posteriormente mediante el atributo class de las etiquetas span o div diferenciamos donde aplicar los estilos según nuestra necesidad.

#identificador de ID {declaración;}

Similar al selector de clase pero utilizando el atributo ID de las etiquetas HTML/XHTML, además utilizamos, a la hora de definirlo, en vez del punto el carácter almohadilla “#”.


11.3. Lo mejor de CSS. El modelo de cajas o Box model.

Si por algo destaca CSS es por el modelo de cajas o “Box model”. En éste modelo, CSS define la representación de cada etiqueta HTML/XHTML como una caja y su labor es controlar las propiedades y visualización de las cajas.

Siguiendo este modelo, cualquier página Web la podemos observar como un conjunto de cajas, cada una con sus propias dimensiones, y lo que realiza CSS, básicamente, es controlar la ubicación, altura, anchura y los márgenes de espacios entre caja y caja y entre el contenido de la caja y el borde.

A continuación te mostramos una caja genérica en la cual vamos a identificar los distintos elementos de dentro a fuera:

  • Contenido. Por ejemplo, las palabras de un párrafo, una imagen, etc. Es el contenido propio del elemento HTML/XHTML. Fíjate que el contenido dispone de un límite.

  • Padding. Relleno, es el espacio libre entre el límite del contenido y el borde que lo encierra.

  • Boder. Borde de la caja, es decir el límite que encierra al elemento HTML/XHTML y su padding.

  • Margin. Espacio ente cajas adyacentes.

Veamos ahora un ejemplo para aclarar los conceptos:

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Ejemplo BoxModel */

.Caja1 {

width: 500px;

height: 40px;

margin: 4em;

border-style: dotted;

border-color: blue;

padding: 0em;

}

.Caja2 {

background-color: yellow;

width: 350px;

height: 400px;

margin: 2em;

border-top-width: thick;

border-top-style: double;

border-top-color: red;


border-bottom-width: medium;

border-bottom-style: dotted;

border-bottom-color: blue;


border-right-width: thin;

border-right-style: dashed;

border-right-color: green;


border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

padding: 1.5em;

}

</style>

<body>

<h1>Ejemplo de hojas de estilo [Modelo de cajas]</h1>

<hr />

<p class="Caja1">

Esta es la Caja nº1

</p>

<p class="Caja2">

Esta es la Caja nº2

</p>

</body>

</html>


Hemos creado dos cajas, analicemos cada una en detalle:

Código fuente de la primera caja:

.Caja1 {

width: 500px;

height: 40px;

margin: 4em;

border-style: dotted;

border-color: blue;

padding: 0em;

}

Primero hemos definido las dimensiones de la caja, su anchura, width y su altura height, mediante medidas relativas a la resolución del navegador “px”.

Seguidamente hemos ido indicando atributos de la caja realizando un recorrido de fuera a dentro en las propiedades. Empezando por la propiedad margin, al indicar 4em, medida relativa respecto al tamaño de la letra del navegador, hemos definido un espacio entre las posibles cajas adyacentes bastante grande, por eso aparece la caja bastante separada de la línea horizontal.

La propiedad margin la podemos descomponer en estas cuatro: margin-top, margin-right, margin-bottom y margin-left para definir con más detalle el margen de la parte superior, derecha, inferior e izquierda respectivamente.

Respecto al borde hemos definido su estilo y el color. Existen los siguientes estilos de bordes: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.

Al igual que con la propiedad margin podemos concretar más especificando cada uno de los lados, para ello disponemos de border-top, border-right, border-bottom y border-left.

El último parámetro de la primera caja que hemos especificado es el relleno padding, lo hemos puesto a cero, ninguno, por lo que el texto aparece en la esquina superior izquierda, pegado al borde de la caja.

También disponemos de las cuatro propiedades específicas para padding: padding-top, padding-right, padding-bottom y padding-left, arriba, derecha, debajo e izquierda respectivamente.


.Caja2 {

background-color: yellow;

width: 350px;

height: 400px;

margin: 2em;

border-top-width: thick;

border-top-style: double;

border-top-color: red;


border-bottom-width: medium;

border-bottom-style: dotted;

border-bottom-color: blue;


border-right-width: thin;

border-right-style: dashed;

border-right-color: green;


border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

padding: 1.5em;

}

En la segunda caja hemos sido más específicos. Obsérvese la propiedad border.


Primero hemos definido el fondo de la caja con la propiedad background-color, puedes también definir como fondo una imagen, en este caso sería mediante background-image.


Para cada borde de la caja hemos definido la anchura, width, el estilo del borde, style y el color, color.

11.4. Construyendo páginas con CSS.

Hasta el momento, tenemos una idea bastante clara de cómo funciona CSS y como aplicarlo a nuestros documentos. Pero para manejar con soltura CSS se nos hace necesario conocer las distintas propiedades que podemos aplicar dentro de nuestras páginas.

A partir de este epígrafe te vamos a mostrar, las propiedades más importantes que dispone CSS sobre los elementos más básicos de HTML/XHTML, todas están extraídas del manual de referencia y las puedes consultar en la siguiente dirección: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/.


11.4.1. Aplicando CSS al texto.

Si deseas controlar la presentación de los textos en tus páginas necesitarás manejar dos conceptos: la fuente y el texto. El primero hace referencia al tipo de fuente y sus propiedades, el segundo, la apariencia del texto en su conjunto. Veamos cuáles son sus propiedades:


Propiedades de la fuente:

Propiedad

Descripción

font

Especifica la familia de la fuente a utilizar, así como sus atributos. Partiendo de esta propiedad podemos definir todos los atributos de la fuente.

Valores:

[ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar ]


Propiedad

Descripción

font-family

Especifica la familia de la fuente a utilizar.

Valores:

[ [ <nombre-familia> | <familia-genérica> ] [, <nombre-familia> | <familia-genérica> ]* ]


Un error muy común es especificar un tipo de fuente que el usuario no tiene instalado en su equipo, para solucionar este problema disponemos de cinco familias genéricas:


Propiedad

Descripción

font-style

Especifica el estilo de la familia de la fuente a utilizar.

Valores:

[ normal | italic | oblique ]


Propiedad

Descripción

font-weight

Especifica el grosor, anchura, de la familia de la fuente a utilizar.

Valores:

[normal | bold | bolder | lighter | 100 | 200 | 300 | 400| 500 | 600 | 700 | 800 | 900 ]


Propiedad

Descripción

font-size

Especifica el tamaño de la familia de la fuente a utilizar.

Valores:

[ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | <longitud> | <porcentaje> ]

CSS dispone de dos tipos distintos de medidas:

1. Relativas, definen su valor en relación a otra medida, existen las siguientes:

* em, relativa al tamaño de letra empleada por el navegador.

* ex, relativa a la altura de la letra empleada por el navegador.

* px, relativa a la resolución empleada por el navegador.

* porcentajes, se definen con un numero y el carácter “%”;

2. Absolutas. Indican valores que no se calculan a partir de otros.


Propiedad

Descripción

font-variant

Convierte minúsculas a mayúsculas.

Valores:

[ normal | small-caps ]

A continuación te mostramos un ejemplo con las características más relevantes de las fuentes:

<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Ejemplo tipos de fuentes*/

.Ejemplo1 {

font-family:serif;

font-style:normal;

font-weight:bold;

font-size:small;

}

.Ejemplo2 {

font-family:sans-serif;

font-style:italic;

font-weight:lighter;

font-size:large;

}

.Ejemplo3 {

font-family:monospace;

font-style:oblique;

font-weight:200;

font-size:1.5em;

}

</style>

<body>

<h1>Ejemplo de hojas de estilo</h1>

<hr />

<p><span class="Ejemplo1">Ejemplo de CSS aplicado a las fuentes.</span></p>

<p> En este texto no se aplicará el estilo</p>

<p><span class="Ejemplo2">Texto al que se le aplica el estilo de la clase Ejemplo2.</span></p>

<p><span class="Ejemplo3">

Ejemplo de estilo de fuente 3

<br>Cada vez me gusta más CSS</span></p>

</body>

</html>

Analicemos en detalle el ejemplo:

* Hemos creado tres clases distintas, a las cuales les hemos definido distintos atributos de la fuente a utilizar.

* Observa en la clase “.Ejemplo3” como hemos definido el tamaño de la fuente utilizando una medida relativa “1.5em”.

Propiedades del texto:

Propiedad

Descripción

text-align

Alineamiento del texto.

Valores:

[ left | right | center | justify ] Izquierda, derecha, centrado y justificado.

Propiedad

Descripción

text-decoration

Efectos del texto

Valores:

[ none | [ underline || overline || line-through || blink ] ] Ninguno, subrayado, línea superior, texto parpadeante.

Para indicar los colores disponemos del atributo color. CSS dispone de cinco formas distintas de especificar el color:

* RGB hexadecimal.

* RGB numérico.

* Nombre de colores: blue, red, etc.

* RGB porcentual.

* Colores del sistema.


Propiedad

Descripción

text-indent

Tabulación del texto

Valores:

[ <longitud> | <porcentaje> ]

Propiedad

Descripción

word-spacing

Espacio entre palabras

Valores:

[normal| <porcentaje> ]


Propiedad

Descripción

letter-spacing

Espacio entre letras

Valores:

[normal | <porcentaje> ]


Propiedad

Descripción

white-space

Define como se trabaja con los espacios en blanco

Valores:

[ normal | pre | nowrap | pre-wrap | pre-line ]


Propiedad

Descripción

text-transform

Convertir a mayúsculas, minúsculas o utilizar letra capital.

Valores:

[ capitalize | uppercase | lowercase | none ]

Veamos otro ejemplo:


<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Ejemplo estilos de textos*/

.Ejemplo1 {

color:red;

text-decoration:overline;

text-indent:2em;

letter-spacing:0.5em;

}

.Ejemplo2 {

color:olive;

text-decoration:underline;

text-indent:0.5em;

letter-spacing:1.5em;

}

.Ejemplo3 {

font-family:monospace;

font-style:oblique;

font-weight:200;

font-size:1.5em;

color:orange;

text-decoration:line-through;

text-indent:10em;

}

</style>

<body>

<h1>Ejemplo de hojas de estilo</h1>

<hr />

<p><span class="Ejemplo1">Ejemplo de CSS aplicado a los textos.</span></p>

<p> En este texto no se aplicará el estilo</p>

<p><span class="Ejemplo2">Texto al que se le aplica el estilo de la clase Ejemplo2.</span></p>

<p><span class="Ejemplo3">

Ejemplo de estilo de fuente 3

<br>Cada vez me gusta más CSS</span></p>

</body></html>

En esta pantalla te mostramos el resultado obtenido desde el navegador.



Observa el estilo de la clase “Ejemplo3” hemos definido tanto atributos para las fuentes como para el texto.

Para indicar medidas relativas introducimos un número y la medida en cuestión, por ejemplo 1.5em.

Los 17 colores que podemos utilizar mediante nombres son: blue, red, gray, gren, lime, maroon, olive, orange, aqua, black, fuchisa, navy, purple, silver, teal, white y yellow.

11.4.2. Aplicando CSS a las listas y viñetas.

Algo muy habitual es enumerar elementos o realizar listas. Veamos que atributos nos proporciona CSS para crearlas con estilo.


Propiedad

Descripción

list-style

Nos permite definir el estilo de la lista, las imágenes a utilizar y la posición. Partiendo de esta propiedad podemos definir todos los atributos de la lista.

Valores:

[ <list-style-type> || <list-style-position> || <list-style-image> ]


Propiedad

Descripción

list-style-image

Imagen a utilizar en las listas.

Valores:

[ url("http://...") | none]


Propiedad

Descripción

list-style-type

Indicamos el estilo del tipo de lista.

Valores:

[ disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none ] Viñeta con un círculo relleno, círculo vacio, cuadrado, valores numéricos, etc.


Propiedad

Descripción

list-style-position

Definimos la posición de los elementos dentro de la lista respecto al icono o marcador de la lista.

Valores:

[ inside | outside ]


<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Ejemplo CSS listas */

.Dias {

color:red;

font-family:monospace;

list-style-type:square;

}

.Meses {

text-decoration:underline;

list-style-image: url("imagenes/icono.png");

letter-spacing:1.5em;

font-family:monospace;

}

</style>

<body>

<h1>Ejemplo de hojas de estilo</h1>

<hr />

Días de la semana:<br>

<p><ul class="Dias">

<li>Lunes</li>

<li>Martes</li>

<li>Miércoles</li>

<li>Jueves</li>

<li>Viernes</li></ul></p>

<p> En este texto no se aplicará el estilo</p>

<p><ul class="Meses">

<li>Enero</li>

<li>Febrero</li>

<li>Marzo</li>

<li>Abril</li>

<li>Mayo</li></ul></p>

</body>

</html>


Ejemplo de CSS con listas:

Hemos incluido una imagen con la instrucción:

list-style-image: url("imagenes/icono.png");


Obviamente icono.png ha de existir y ubicarse donde hemos indicado dentro de nuestro servidor Web.

11.4.3. Aplicando CSS a las tablas.

Otro de los denominados elementos básicos de HTML/XHTML son las tablas. A continuación te mostramos las propiedades de CSS más utilizadas sobre estos elementos:


Propiedad

Descripción

border-collapse

Estilos de los bordes de las celdas.

Valores:

[ collapse | separate ] Une los bordes de celdas adyacentes (más atractivo) o fuerza a que cada celda muestre sus bordes (opción por defecto).


Propiedad

Descripción

border-spacing

Espacio entre los bordes de las celdas.

Valores:

<longitud_horizontal> <longitud_vertical>? Espacio o separación horizontal y vertical.


Propiedad

Descripción

empty-cells

Celdas vacías visibilidad.

Valores:

[ show | hide] Las opciones son: mostrarlas u ocultarlas.


Propiedad

Descripción

caption-side

Posición del título en la tabla.

Valores:

[ top | bottom ] Superior, inferior.


Propiedad

Descripción

table-layout

Algoritmo usado para el formato de las celdas, filas y columnas.

Valores:

[ auto | fixed ] auto fuerza a que el navegador utilice un algoritmo rápido, más eficiente, con fixed el navegador tiene libertad absoluta para elegir cualquier algoritmo.


<html>

<head></head>

<title>Guía del perfecto Webmaster.</title>

<style type="text/css">

/*Ejemplo CSS Tablas */

.Tabla1 {

color:red;

background-color:yellow;

font-family:monospace;

border-collapse: collapse;

caption-side:top;

}

.Tabla2 {

text-decoration:underline;

border-collapse: separate;

caption-side:bottom;

font-family:monospace;

empty-cells:hide;

}

</style>

<body>

<h1>Ejemplo de hojas de estilo [Tablas]</h1>

<hr />

<p><table class="Tabla1" border=”1”>

<caption> Dias </caption>

<tr>

<td>Lunes</td>

<td>Martes</td>

<td>Miércoles</td>

<td>Jueves</td>

<td>Viernes</td>

</tr>

<tr>

<td>Descando</td>

<td>Trabajo</td>

<td></td>

<td>Descanso</td>

<td>Descanso</td>

</tr>

</p>

<br>

<p><table class="Tabla2" border=”1”>

<caption> Meses </caption>

<tr>

<td>Enero</td>

<td>Febrero</td>

<td></td>

<td>Abril</td>

<td>Mayo</td>

</tr>

<tr>

<td>Completo</td>

<td>Mitad</td>

<td>Mitad</td>

<td>Completo</td>

<td>Vacaciones</td>

</tr>

</p>

</body>

</html>

Observa el ejemplo que te mostramos:

* En la primera tabla hemos indicado las siguientes propiedades:

- Color, rojo.

- Color de fondo, amarillo.

- Familia de la fuente, courier new.

- Bordes, sin bordes.

- Título de la tabla superior.

* Y en la segunda tabla:

- Texto, subrayado

- Bordes, separado.

- Título de la tabla, inferior.

- Familia de la fuente, courier new.

- Celdas vacías, no mostrar.

A continuación te mostramos el resultado en el navegador:

En algunas ocasiones existen propiedades CSS que no soportan los navegadores, como por ejemplo la propiedad caption-side y el navegador Opera. Nuestro consejo es que antes de publicar una página Web la visualices con distintos navegadores.

11.5. Firebug y chuletas CSS. Recursos esenciales para el Webmaster.

Dada la filosofía del libro se nos hace imposible, por su extensión, poner un ejemplo de cada uno de los atributos que podemos manejar en CSS. Es por ello, que dediquemos este epígrafe a mostrarte los recursos que nosotros consideramos básicos a la hora de trabajar con CSS.

Por un lado queremos mostrarte donde puedes encontrar una chuleta para CSS. Las chuletas son documentos que proporcionan información rápida y clara de cada uno de los elementos y funciones a los que esté dedicada la chuleta. Dirígete a algunas de las siguientes direcciones:

http://www.emezeta.com/articulos/emezeta-card-php-cheat-sheet (chuleta de PHP)

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

http://www.visibone.com/

Existe además, nuestro complemento favorito para Firefox, Firebug. Este complemento es un inspector de páginas Web, que nos permite obtener al instante el código CSS de una página que estamos visitando. Dispone también de un monitor de red desde el que podemos observar las peticiones realizadas al cargar una página.

El procedimiento para instalarlo es el siguiente:

1.- Abre tu navegador Firefox y sigue la secuencia Herramientas, Complementos.

2.-Pulsa sobre la opción Obtener Extensiones, situada en la parte inferior derecha de la pantalla.

3.- Te redireccionará a la página oficial de complementos de Firefox. Busca en ella el complemento Firebug. Dispones de una caja de búsqueda en la parte superior.

4.-Una vez encontrada haz clic en Añadir a firefox.

5.-Aparecerá una pantalla indicándote que el complemento no está firmado digitalmente, no te preocupes, espera el tiempo necesario y pulsa sobre Instalar ahora.

6.- Una vez instalado se te solicita que reinicies Firefox. Cuando vuelvas a iniciar la aplicación ya dispondrás de esta herramienta, concretamente en el menú Herramientas opción Firebug.